<template>
	<hx-navbar :is-back="false" :title="pageName"></hx-navbar>
	<view v-for="(item, index) in components" :key="index">
		<diy-notice v-if="item.type === 'notice'" :showData="item.formData"></diy-notice>
		<diy-goods v-if="item.type === 'goods'" :showData="item.formData"></diy-goods>
		<diy-tabnav v-if="item.type === 'tab-nav'" :showData="item.formData"></diy-tabnav>
		<diy-image v-if="item.type === 'image-ad'" :showData="item.formData"></diy-image>
		<diy-title-text v-if="item.type === 'title-text'" :showData="item.formData"></diy-title-text>
		<diy-rich-text v-if="item.type === 'rich-text'" :showData="item.formData"></diy-rich-text>
		<diy-gap v-if="item.type === 'gap'" :showData="item.formData"></diy-gap>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import DiyNotice from '@/components/diy-page/diy-notice/index.vue';
import DiyGoods from '@/components/diy-page/diy-goods/index.vue';
import DiyTabnav from '@/components/diy-page/diy-tabnav/index.vue';
import DiyImage from '@/components/diy-page/diy-image/index.vue';
import DiyTitleText from '@/components/diy-page/diy-titletext/index.vue';
import DiyGap from '@/components/diy-page/diy-gap/index.vue';
import DiyRichText from '@/components/diy-page/diy-rich-text/index.vue';
import { getPageDesign } from '@/api/promotion/pageDesign';

const components = ref<any[]>([]);
const pageName = ref('首页');

const initPageDesign = () => {
	getPageDesign({}).then((response) => {
		const data = response.data;
		const pageContent = JSON.parse(data.pageContent);
		components.value = pageContent.components;
		pageName.value = data.pageName;
		uni.stopPullDownRefresh();
	});
};
onLoad(() => {
	initPageDesign();
});
onPullDownRefresh(() => {
	initPageDesign();
});
</script>

<style></style>
